#doProblem {
	@include flexbox();
	@include flex-direction(column);
	height: 100%;
	background: rgba(246,246,246,1);
	header {
        @include flexbox();
		height: 45px;
        line-height: 45px;
        color: #fff;
        background: linear-gradient(to right, #2fd4ac,  #2fd492);
		i {
			width: 30px;
			background: url(image/icon_return.png) no-repeat center;
			background-size: 100%;
		}
		div {
			@include flex();
			text-align: center;
			margin-right: 30px;
			font-size: 18px;
			b {font-weight: normal}
		}
	}
	.border-8 {
		width: 100%;
		height: 8px;
		background: #F6F6F6;
	}

	.swipe {
		@include flex();
		width: 100%;
		overflow-y: scroll;
		.problem {
			height: auto;
			background: #fff;
			padding: 20px 15px;
			color: rgba(51,51,51,1);
			h3 {
				font-size: 17px;
				font-weight: normal;
			}
			label {
				display: block;
				padding-top: 20px;
				input[type='radio'] {
					position: absolute;
					opacity: 0;
				}
				input[type='radio']+span {
					position: relative;
					display: inline-block;
					width: 26px;
					height: 26px;
					line-height: 26px;
					text-align: center;
					font-size: 15px;
					border-radius: 50%;
					border: 1px solid rgba(223,223,223,1);
					margin-top: auto;
					margin-bottom: auto;
					margin-right: 18px;
					i {
						position: absolute;
						left: 0;
						top: 0;
						display: inline-block;
						width: 100%;
						height: 100%;
						background-repeat: no-repeat;
						background-size: 24px;
						&.right {
							background-image: url(image/icon_right.png);
						}
						&.wrong {
							background-image: url(image/icon_wrong_problem.png);
						}
					}
				}

				input[type='radio']:checked+span {
					i.wrong {
						background-image: url(image/icon_wrong_problem.png);
					}
				}
			}
		}
		.detailAnswer {
			width: 100%;
			background: #fff;
			padding: 25px 15px;
			font-size: 15px;
			color: rgba(75,75,75,1);
			h3 {
				position: relative;
				text-align: center;
				font-size: 15px;
				width: 60px;
				margin: auto;
				font-weight: normal;
				color: rgba(75,75,75,1);
				&:before {
					content: '';
					position: absolute;
					left: -85px;
					top: 50%;
					background-color: #dfdfdf;
					display: inline-block;
					width: 70px;
					height: 1px;
				}
				&:after {
					content: '';
					position: absolute;
					left: 75px;
					top: 50%;
					background-color: #dfdfdf;
					display: inline-block;
					width: 70px;
					height: 1px;
				}
			}
			b {font-weight: normal;color: rgba(51,51,51,1)}
			.gray {
				background: rgba(246,246,246,1);
				padding: 10px;
			}
		}
	}
	.footer {
		@include flexbox();
		width: 100%;
		height: 50px;
		border-top: 1px solid #dfdfdf;
		background: #fff;
		font-size: 15px;
		.send {
			position: relative;
			@include flex();
			height: 100%;
			margin-left: 10px;
			text-align: left;
			padding-left: 20px;
			line-height: 49px;
			&:before {
				content: '';
				display: inline-block;
				width: 15px;
				height: 15px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-image: url(image/icon_their_papers.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
			}
		}
		.rightNum {
			position: relative;
			width: 50px;
			height: 100%;
			margin-left: 10px;
			text-align: left;
			padding-left: 20px;
			line-height: 49px;
			color: rgba(229,50,45,1);
			&:before {
				content: '';
				display: inline-block;
				width: 15px;
				height: 15px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-image: url(image/icon_answer_correctly.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
			}
		}
		.wrongNum {
			position: relative;
			width: 50px;
			height: 100%;
			margin-left: 10px;
			text-align: left;
			padding-left: 20px;
			line-height: 49px;
			color: rgba(43,180,238,1);
			&:before {
				content: '';
				display: inline-block;
				width: 15px;
				height: 15px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-image: url(image/icon_wrong.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
			}
		}
		.answerProgress {
			position: relative;
			width: 70px;
			height: 100%;
			margin-left: 10px;
			text-align: left;
			padding-left: 20px;
			line-height: 49px;
			&:before {
				content: '';
				display: inline-block;
				width: 15px;
				height: 15px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-image: url(image/menu_pro.jpg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
			}
			i {
				color: rgba(156,156,156,1)
			}
		}
	}
	.proListBox {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.42);
		.proList {
			position: absolute;
			width: 100%;
			height: 436px;
			background: #fff;
			border-radius: 15px 15px 0 0;
			left: 0;
			bottom: 0;
			.footer {
				border-radius: 15px 15px 0 0;
				border-bottom: 1px solid rgba(223,223,223,1);
			}
			ul {
				padding-right: 15px;
				@include flexbox();
				@include flex-wrap(wrap);
				li {
					width: 43px;
					height: 43px;
					border-radius: 50%;
					border: 2px solid  rgba(223,223,223,1);
					color: rgba(163,163,163,1);
					text-align: center;
					line-height: 43px;
					margin: 10px 0 0px 15px;
					&.right {
						border: 2px solid  rgba(254,159,160,1);
						color: rgba(229,50,45,1);
						background: rgba(252,232,232,1);
					}
					&.wrong {
						border: 2px solid  rgba(133,211,251,1);
						color: rgba(43,180,238,1);
						background: rgba(231,247,253,1);
					}
				}
			}
		}
		.confirmBox {
			position: absolute;
			z-index: 3;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.62);
			&>div {
				width: 270px;
				height: 187px;
				background: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				border-radius: 10px;
				img.message {
					position: absolute;
					left: 50%;
					top: -30px;
					transform: translateX(-50%);
				}
				img.close {
					position: absolute;
					right: -26px;
					top: -38px;
				}
				div {
					position: absolute;
					width: 100%;
					left: 0;
					top: 60px;
					padding:0 25px;
					p {
						text-align: center;
						font-size: 15px;
						color: rgba(51,51,51,1);
						i {
							font-size: 17px;
							color: rgba(229,50,45,1);
						}
					}
					div {
						@include flexbox();
						@include justify-content(space-between);
						a {
							display: inline-block;
							width: 104px;
							height: 35px;
							text-align: center;
							line-height: 35px;
							color: #fff;
							background: rgba(229,50,45,1);
							border-radius: 16px;
						}
					}

				}
			}
		}
	}
}